<template>
  <div class="form-setting-panel">
    <div class="form-design-warning form-jscontrol-setting">
      {{ $t('formSetting.jsCodeBlock.jsCodeMsg') }}
    </div>
    <!-- start 标题 -->
    <form-title-setting
      :field="field"
      :setting="setting"
      @input="updateForDom"
    ></form-title-setting>
    <!-- end 标题 -->

    <!-- start 描述信息 -->
    <form-describe-setting
      :field="field"
      @input="updateForDom"
    ></form-describe-setting>
    <!-- end 描述信息 -->

    <!-- start 代码块编辑 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">
        {{ $t('formSetting.jsCodeBlock.jsCodeEdit') }}
        <el-tooltip
          :content="$t('formSetting.jsCodeBlock.jsEditTip')"
          placement="top"
        >
          <i class="iconfont icon-question"></i>
        </el-tooltip>
      </h4>
      <div class="form-item-box form-item-compilation">
        <el-button @click="openTestDialog">{{ $t('formSetting.jsCodeBlock.jsCodeTest') }}</el-button>
        <p>{{ $t('formSetting.jsCodeBlock.jsCodeTestBtnText') }}</p>
      </div>
    </div>
    <!-- end 代码块编辑 -->

        <!-- start 字段权限 -->
    <div class="form-setting-group form-setting-item" v-if="!isOnlyEngineerFlag">
      <h4 class="form-item-title">{{$t('common.base.fieldPermissions')}}</h4>
      <div class="form-item-box">
        <!-- 是否对客户可见 -->
        <form-visible-customer-setting :field="field" @input="update" v-if="isShowVisibleCustomer"></form-visible-customer-setting>
      </div>
    </div>
    <!-- end 字段权限 -->


    <!-- start 其他设置 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{ $t('common.base.otherSet') }}</h4>
      <div class="form-item-box">
        <el-checkbox
          :value="field.setting.automaticOperation"
          @input="update($event, 'automaticOperation', true)"
          :true-label="1"
          :false-label="0"
        >
          {{ $t('formSetting.jsCodeBlock.jsCodeRunText') }}
          <el-tooltip
            :content="$t('formSetting.jsCodeBlock.jsCodeRunMsg')"
            placement="top"
          >
            <i class="iconfont icon-question"></i>
          </el-tooltip>
        </el-checkbox>
      </div>
      <div class="form-item-box">
        <el-checkbox
          :value="field.setting.hidden"
          @input="update($event, 'hidden', true)"
          :true-label="1"
          :false-label="0"
        >
          {{ $t('formSetting.jsCodeBlock.formHidden') }}
          <el-tooltip
            v-if="isFlowForm"
            :content="$t('formSetting.jsCodeBlock.formHiddenTip')"
            placement="top"
          >
            <i class="iconfont icon-question"></i>
          </el-tooltip>
        </el-checkbox>
      </div>
      <div class="form-item-box">
        <el-checkbox
          :value="field.setting.sync"
          @input="update($event, 'sync', true)"
          :true-label="1"
          :false-label="0"
        >
          {{ $t('common.form.tip.jsCodeBlock.syncExecution') }}
        </el-checkbox>
      </div>
    </div>
    <!-- end 其他设置 -->

    <compilation-test-dialog
      ref="compilationTestDialog"
      :field="field"
      @input="update"
      :fields="fields"
    ></compilation-test-dialog>
  </div>
</template>

<script>
/* mixin */
import SettingMixin from '@src/component/form/mixin/setting';
/* props */
import { settingProps } from '@src/component/form/components/props';
/* component */
import compilationTestDialog from './components/compileEditor/runTestDialog.vue';

export default {
  name: 'form-js-control-setting',
  mixins: [SettingMixin],
  components: {
    compilationTestDialog,
  },
  props: {
    ...settingProps,
    getContext: {
      type: Function,
      default:()=> {}
    }
  },
  computed: {
    isFlowForm() {
      return this.getContext()?.isFlowForm || false;
    }
  },
  methods: {
    openTestDialog() {
      this.$refs.compilationTestDialog.visible = true;
    },
    updateForDom(event) {
      let el = event.target;
      let prop = el.dataset.prop;
      let value = el.value;

      this.update(value, prop);
    },
    update(value, prop, isSetting = false) {
      this.$emit('input', { value, prop, isSetting });
    },
  },
};
</script>
<style lang="scss" scoped>
.form-jscontrol-setting {
  margin-bottom: 8px;
}
.form-item-compilation {
  margin-top: 10px;
  width: 100%;
  button {
    width: 100%;
  }
  p {
    font-size: 12px;
    color: #8c8c8c;
    margin-top: 8px;
  }
}
</style>
